<template>
  <div class="container">
    <div class="par">
      <div class="aaa">
        <div v-for="(item, index) in list" :key="index">
          <div v-html="item"></div>
        </div>
      </div>
      <!-- <div class="ccc">

      </div> -->
      <div class="bbb">
        <div v-for="(item, index) in list1" :key="index">
          <div v-html="item"></div>
        </div>
      </div>
    </div>

    <div id="mmm">
      <div v-for="(item, index) in list" :key="index">
        <div v-html="item"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        '<div>我爱你</div>',
        '<div>星星点灯</div>'
      ],
      list1: [
        '<div>我恨你</div>',

      ],
      html: null,
    };
  },
  mounted() {
    const dd = new DiffDOM({
      // preVirtualDiffApply: function (info) {
      //   console.log(info);
      // },
      // postVirtualDiffApply: function (info) {
      //   console.log(info);
      // },
      // preDiffApply: function (info) {
      //   console.log(info);
      // },
      // postDiffApply: function (info) {
      //   console.log(info);
      // },
    });
    let oldDOM = document.querySelector(".aaa");
    let newDOM = document.querySelector(".bbb");
    // const container = document.createElement("div");
    const diffResult = dd.diff(oldDOM, newDOM);
    console.log(diffResult);
    // dd.apply(container, diffResult);
    // const htmlString = container.innerHTML;
    // const appElement = document.getElementById("#app");
    // appElement.innerHTML = htmlString;

    // 标记需要删除的数据（添加下划线）
    // const deleteElements = appElement.querySelectorAll(".delete");
    // deleteElements.forEach((element) => {
    //   element.style.textDecoration = "underline";
    // });

    // // 标记需要添加的数据（添加删除线）
    // const addElements = appElement.querySelectorAll(".add");
    // addElements.forEach((element) => {
    //   element.style.textDecoration = "line-through";
    // });

    // // 创建diffDOM实例
    // let diff = new DiffDOM();
    // // 假设oldDOM和newDOM是要比对的两个DOM树
    // let oldDOM = document.querySelector(".aaa");
    // let newDOM = document.querySelector(".bbb");
    // // 比较两个DOM树的差异
    // let patches = diff.diff(oldDOM, newDOM);
    // // 将差异应用于旧的DOM树
    // console.log(patches);
    // let compareDOM = document.querySelector(".mmm");
    // diff.apply(compareDOM, patches);
    // // 获取比对后的HTML
    // let comparedHTML = compareDOM.innerHTML;
    // this.html = comparedHTML;
  },
  methods: {
    // applyStyles(node) {
    //   if (node.nodeName === "INS") {
    //     node.style.backgroundColor = "green"; // 将新增的节点背景色设置为绿色
    //   } else if (node.nodeName === "DEL") {
    //     node.style.textDecoration = "line-through"; // 将删除的节点添加删除线
    //   } else {
    //     // 递归遍历子节点
    //     for (let i = 0; i < node.childNodes.length; i++) {
    //       applyStyles(node.childNodes[i]);
    //     }
    //   }
    // },
  },
};
</script>

<style>

</style>